<template>
    <div>
    <h1>slot 插槽练习</h1>
    <layout>
        <!-- <template>hello 匿名插槽</template> -->
        <!-- hello 匿名插槽
        <div>Hello 匿名插槽</div> -->
        <template v-slot:default>匿名插槽  default 特殊的具名插槽 </template>
        <!-- 具名插槽 -->
        <template v-slot:content> Hi content 具名插槽</template>
         <!-- 作用域插槽 -->
         <!-- 对象解构 -->
        <template v-slot:footer="{fc}">{{fc}}</template>
    </layout>
    </div>
</template>

<script>
import Layout from "./Layout";
export default {
  components: {
    Layout
  }
};
</script>

<style lang="scss" scoped>
</style>